<!DOCTYPE html>
{% load i18n %}
<html>

<head>
    {% block head %}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->

    <!-- Bootstrap css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css"
        rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css"
        rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css"
        rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--下拉菜单-->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkDropdownMenu-1.0/js/bkDropdownMenu.js"></script>

    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!--jquery2.0组件依赖文件-->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css"
        rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/html5shiv.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/respond.min.js"></script>
    <![endif]-->
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
    {% endblock %}
</head>

<body>
   <!--HTML-->
<div class="king-vertical-nav4" style="width:200px;" id="king-vertical-nav4">
    <div class="sidebar-inner">
        <ul class="navi">
            <li>
                <a href="javascript:;">
                    <i class="fa fa-gear"></i>首页
                </a>
            </li>
            <li class="has_submenu current open">
                <a href="javascript:;">
                    <i class="fa fa-wrench"></i>表单
                    <span class="pull-right"><i class="fa fa-angle-down"></i></span>
                </a>
                <ul class="sub-menu">
                    <li class="active">
                        <a href="javascript:;">表单一<i class="fa fa-chevron-right pull-right"></i></a>
                    </li>
                    <li>
                        <a href="javascript:;">表单二<i class="fa fa-chevron-right pull-right"></i></a>
                    </li>
                    <li>
                        <a href="javascript:;">表单三<i class="fa fa-chevron-right pull-right"></i></a>
                    </li>
                </ul>
            </li>
            <li class="has_submenu">
                <a href="javascript:;">
                    <i class="fa fa-tasks"></i>表格
                    <span class="pull-right"><i class="fa fa-angle-down"></i></span>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a href="javascript:;">表格一<i class="fa fa-chevron-right pull-right"></i></a>
                    </li>
                    <li>
                        <a href="javascript:;">表格二<i class="fa fa-chevron-right pull-right"></i></a>
                    </li>
                </ul>
            </li>
            <li class="last has_submenu">
                <a href="javascript:;">
                    <i class="fa fa-ellipsis-h"></i>其他
                    <span class="pull-right"><i class="fa fa-angle-down"></i></span>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a href="javascript:;">空白<i class="fa fa-chevron-right pull-right"></i></a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>          
<!--JS-->
<script>
$(function() {
    //king-vertical-nav4_js_start
    //纵向导航一-1，侧边二级菜单
    $(".has_submenu > a").click(function(e) {

        var menu = $(this).parent("li");
        var sunMenu = $(this).next("ul");
 
        if (menu.hasClass("open")) {
            sunMenu.slideUp(350,function(){
                menu.removeClass("open");
            });
            
        } else {
            $(".navi > li > ul").slideUp(350);
            
            setTimeout(function(){
                $(".navi > li").removeClass("open");
                sunMenu.slideDown(350);
                menu.addClass("open");
            },350);
            
        }

        return false;
    });
    //king-vertical-nav4_js_end
});
</script>

</body>

</html>